<template>
  <div>
    <!-- 搜索 -->
    <Search
      v-model="queryModel.query"
      :loading="queryloading"
      @search="
        queryModel.pagenum = 1;
        searchUser();
      "
      @click="
        $refs.add.show();
        model = {};
      "
    >
      添加用户
    </Search>
    <!-- 表格 -->
    <Table
      :cols="cols"
      row-key="id"
      :data="list"
      @change="searchUser"
      v-model="queryModel"
      :total="total"
    >
      <template v-slot:state="{ row }">
        <el-switch @change="getstate(row)" v-model="row.mg_state"> </el-switch>
      </template>
      <template v-slot:action="{ row }">
        <el-button
          type="primary"
          size="mini"
          @click="
            model = { ...row };
            $refs.add.show();
          "
          icon="el-icon-edit"
          >编辑</el-button
        >
        <el-button
          type="danger"
          size="mini"
          @click="getdelusers(row)"
          icon="el-icon-delete"
          >删除</el-button
        >
        <el-button
          type="warning"
          @click="
            model = { ...row };
            getroleslist();
          "
          size="mini"
          icon="el-icon-star-off"
          >分配角色</el-button
        >
      </template>
    </Table>

    <!-- 分页 -->
    <!-- <el-pagination
      @size-change="
        (v) => {
          queryModel.pagesize = v;
          searchUser();
        }
      "
      @current-change="
        (v) => {
          queryModel.pagenum = v;
          searchUser();
        }
      "
      :current-page="queryModel.pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryModel.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination> -->

    <!-- 添加框 -->
    <!-- <Dialog  ref="add">
      <Form ref="form"> </Form>
    </Dialog> -->
    <DF
      :title="title + '用户'"
      @confirm="getaddusers"
      v-model="model"
      ref="add"
      :opts="opts"
    />

    <Dialog title="分配角色" ref="fp" @confirm="changeRoles">
      <p>当前用户 : {{ model.username }}</p>
      <p>当前角色 : {{ model.role_name }}</p>
      <p>
        分配新角色 :
        <el-select v-model="model.rid">
          <el-option
            v-for="item in roles"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          ></el-option>
        </el-select>
      </p>
    </Dialog>
  </div>
</template>

<script>
import { search, changestate, addUsers, delUsers, updataUsers } from "api/user";
import { getRoles, updataRoles } from "api/rights";
import { queryMixin } from "@/mixin/baseMixin";


export default {
  name: "users",
  mixins: [queryMixin],
  data() {
    return {
      /**
       * 表格数据
       */
      cols: [
        {
          title: "#",
          type: "index",
        },
        {
          title: "姓名",
          name: "username",
        },
        {
          title: "邮箱",
          name: "email",
        },
        {
          title: "电话",
          name: "mobile",
        },
        {
          title: "角色",
          name: "role_name",
        },
        {
          title: "状态",
          slot: "state",
        },
        {
          title: "操作",
          slot: "action",
          width: "300px",
        },
      ],
      /**
       * 角色列表
       */
      roles: [],
      /**
       * 添加用户数据
       */
      model: {},
    };
  },
  created() {
    this.searchUser();
  },
  computed: {
    opts() {
      return {
        username: {
          title: "用户名",
          required: true,
          max: 10,
          dis: !!this.model.id,
          ph: "请输入用户名",
          rules: [{ min: 5, max: 10 }],
        },
        ...(this.model.id
          ? {}
          : {
              password: {
                title: "密码",
                required: true,
                max: 15,
                type: "password",
                ph: "请输入密码",
                rules: [{ min: 6, max: 15 }],
              },
            }),
        email: {
          title: "邮箱",
          required: true,
          max: 30,
          ph: "请输入邮箱",
          rules: [{ type: "email", message: "邮箱格式不正确" }, { max: 30 }],
        },
        mobile: {
          title: "电话",
          required: true,
          max: 11,
          ph: "请输入电话",
          rules: [
            { pattern: /^1[3-9]\d{9}$/, message: "手机号格式错误" },
            { max: 11 },
          ],
        },
      };
    },
    /**
     * 标题
     */
    title() {
      return this.model.id ? "编辑" : "添加";
    },
  },
  methods: {
    /**
     * 修改角色列表
     */
    async changeRoles() {
      const aa = this.$refs.fp;
      try {
        aa.start();
        await updataRoles(this.model.id, this.model.rid);
        this.$m.success("修改角色成功");
        aa.hide();
        this.searchUser();
      } catch (error) {}
      aa.stop();
    },
    /**
     * 获取角色列表
     */
    async getroleslist() {
      try {
        this.tableloading = true;
        this.roles = await getRoles();
        const rid =
          this.roles.find((c) => c.roleName === this.model.role_name)?.id ??
          this.roles[0].id;
        this.$set(this.model, "rid", rid);
        this.$refs.fp.show();
      } catch (error) {}
      this.tableloading = false;
    },

    /**
     * 删除用户
     */
    async getdelusers({ id, username }) {
      let res;
      try {
        res = await this.$myconfirm(`你确定要删除【${username}】吗`);
        await delUsers(id);
        this.$m.success("删除成功");
        this.searchUser();
      } catch (error) {}
      res && res();
    },
    /**
     * 添加用户
     */
    async getaddusers() {
      const fn = this.$refs.add;
      try {
        fn.start();
        await (this.model.id ? updataUsers : addUsers)(this.model);
        this.$m.success(this.title + "成功");
        fn.hide();
        this.searchUser();
      } catch (error) {}
      fn.stop();
    },
    /**
     * 修改状态
     */
    async getstate(row) {
      try {
        await changestate(row.id, row.mg_state);
        this.$m.success("修改状态成功");
        this.searchUser();
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * 获取搜索
     */
    async searchUser() {
      try {
        this.queryloading = true;
        const { total, users } = await search(this.queryModel);
        this.list = users;
        this.total = total;
      } catch (error) {}
      this.queryloading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.searchbox {
  display: flex;
  .input {
    width: 368px;
    margin-right: 15px;
  }
}
.el-pagination {
  margin-top: 10px;
}
.el-table {
  margin-top: 10px;
}
</style>